<template>
  <div bg-white border-gray-100 border-solid px-20 mb-30>
    <div px-10>
      <h2 my-20 style="text-align: center">{{ blog.title }}</h2>
      <div style="font-size: 13px; text-align: center">
        <span mx-10
          ><TheIcon icon="ic:twotone-date-range" :size="15" class="icon" />{{ formatDate(blog.updateTime) }}</span
        >
        <span mx-10> <TheIcon icon="mdi:eye-check" :size="15" class="icon" />={{ blog.views }} </span>
        <span mx-10> <TheIcon icon="ph:pen-bold" :size="15" class="icon" />字数≈{{ blog.words }} </span>
        <span mx-10
          ><TheIcon icon="ic:round-access-time-filled" :size="15" class="icon" />阅读时长≈{{ blog.readTime }}</span
        >
      </div>
      <router-link :to="`/category/` + blog.categoryId">
        <n-button rounded-10 size="small" type="warning">{{ blog.categoryName }}</n-button>
      </router-link>
      <MdEditor v-model="blog.content" :preview-only="true" my-10></MdEditor>
    </div>
    <div divide-gray-400 divide-y mb-20 mt-10>
      <div v-for="tag in blog.tags" :key="tag.id" mt-20 pt-15>
        <n-button rounded-10 size="small" :color="tag.color" @click="handleclickTag(tag.id)">{{
          tag.tagName
        }}</n-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getBlogById } from '@/api/blog.js'
import { formatDate } from '@/utils/'
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

const blog = ref({})

const router = useRouter()
const route = useRoute()

onMounted(() => {
  console.log('onMounted')
  getData()
})

function getData() {
  getBlogById(route.params.blogId).then((res) => {
    blog.value = res?.data
  })
}

function handleclickTag(tagId) {
  router.push(`/tag/${tagId}`)
}

function getImageUrl(url) {
  return new URL(url, import.meta.url).href
}
</script>

<style scoped></style>
